@import '../../assets/less/inc/variables';

.tile .t-header .th-title a.query-link {
  color: rgba(0, 0, 0, 0.5);
}

visualization-name:empty + span {
  color: rgba(0, 0, 0, 0.8);
}

visualization-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  
  &:after {
    content: "−";
    margin-left: 5px;
  }
  
  &:empty:after {
    content: none;
  }
}

.th-title p.hidden-print {
  margin-bottom: 0;
}

.widget-wrapper {
  .parameter-container {
    margin: 0 15px;
  }
  
  .body-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    
    .body-row {
      flex: 0 1 auto;
    }
    
    .body-row-auto {
      flex: 1 1 auto;
    }
  }
  
  .spinner-container {
    position: relative;
    
    .spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  
  .dropdown-header {
    padding: 0;
    
    .actions {
      position: static;
    }
  }
  
  .t-header.widget {
    .dropdown {
      margin-top: -15px;
      margin-right: -15px;
      
      .actions {
        position: static;
      }
    }
  }
  
  .scrollbox:empty {
    padding: 0 !important;
    font-size: 1px !important;
  }
  
  .widget-text {
    :first-child {
      margin-top: 0;
    }
    :last-child {
      margin-bottom: 0;
    }
  }
}

.editing-mode {
  .widget-menu-regular {
    display: none;
  }
  .widget-menu-remove {
    display: block;
  }
  
  a.query-link {
    pointer-events: none;
    cursor: move;
  }
  
  .th-title {
    cursor: move;
  }
  
  .refresh-indicator {
    transition-duration: 0s;
    
    rd-timer {
      display: none;
    }
    
    .refresh-indicator-mini();
  }
}

.refresh-indicator {
  font-size: 18px;
  color: #86a1af;
  transition: all 100ms linear;
  transition-delay: 150ms; // waits for widget-menu to fade out before moving back over it
  transform: translateX(22px);
  position: absolute;
  right: 29px;
  top: 8px;
  display: flex;
  flex-direction: row-reverse;

  .refresh-icon {
    position: relative;
    
    &:before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0;
      width: 24px;
      height: 24px;
      background-color: #e8ecf0;
      border-radius: 50%;
      transition: opacity 100ms linear;
      transition-delay: 150ms;
    }

    i {
      height: 24px;
      width: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  rd-timer {
    font-size: 13px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 100ms linear;
    transition-delay: 150ms;
    color: #bbbbbb;
    background-color: rgba(255,255,255,.9);
    padding-left: 2px;
    padding-right: 1px;
    margin-right: -4px;
    margin-top: 2px;
  }

  .widget-visualization[data-refreshing="false"] & {
    display: none;
  }
}

.refresh-indicator-mini() {
  font-size: 13px;
  transition-delay: 0s;
  color: #bbbbbb;
  transform: translateY(-4px);

  .refresh-icon:before {
    transition-delay: 0s;
    opacity: 0;
  }

  rd-timer {
    transition-delay: 0s;
    opacity: 1;
    transform: translateX(0);
  }
}

.tile {
  .widget-menu-regular, .btn__refresh {
    opacity: 0 !important;
    transition: opacity 0.35s ease-in-out;
  }

  .t-header {
    .th-title {
      padding-right: 23px; // no overlap on RefreshIndicator

      a {
        color: fade(@redash-black, 80%);
        font-size: 15px;
        font-weight: 500;
      }
    }

    .query--description {
      font-size: 14px;
      line-height: 1.5;
      font-style: italic;

      p {
        margin-bottom: 0;
      }
    }
  }

  .t-header.widget {
    padding: 15px;
  }

  &:hover {
    .widget-menu-regular, .btn__refresh {
      opacity: 1 !important;
      transition: opacity 0.35s ease-in-out;
    }

    .refresh-indicator {
      .refresh-indicator-mini();
    }
  }

  .tile__bottom-control {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn-transparent {
      &:first-child {
        margin-left: -10px;
      }

      &:last-child {
        margin-right: -10px;
      }
    }



    a {
      color: fade(@redash-black, 65%);

      &:hover {
        color: fade(@redash-black, 95%);
      }
    }
  }
}


// react-grid-layout overrides
.react-grid-item {
  
  // placeholder color
  &.react-grid-placeholder {
    border-radius: 3px;
    background-color: #E0E6EB;
    opacity: 0.5;
  }
  
  // resize placeholder behind widget, the lib's default is above 🤷‍♂️
  &.resizing {
    z-index: 3;
  }
  
  // auto-height animation
  &.cssTransforms:not(.resizing) {
    transition-property: transform, height; // added ", height"
  }
  
  // resize handle size
  & > .react-resizable-handle::after {
    width: 11px;
    height: 11px;
    right: 5px;
    bottom: 5px;
  }
}